import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
import { Bar } from 'victory-native';
import {
  px2dp,
  fontColorCoffee,
  splitLineColorLightGray,
  fontColorSecDeepGray,
  fontColorLightGreen,
  fontColorDeepGray,
  fontColorRed
} from '../../../../../common/styles';
import VerticalLine from './VerticalLine';
import FlagView from './FlagView';
import HandleBtn from './HandleBtn';
import FavoriteBtn from './FavoriteBtn';
import supply from '../../../../../api/supply';
import { BackImage, msg, Header, _, } from '../../../../../common';
import { iconRightCoffee,  iconTime, iconTon, iconRightGreen, iconRightGray } from '../../../../../image';

/**
 * @author kanglang
 * @description 物流列表 单条目
 */
export default class LogisticsItem extends Component {
  constructor(props) {
    super(props);
    const { logisticsObj } = this.props;
    this.state = {
      unitList: [],
      ...logisticsObj
    };
  }

    dispatchStatus = status => {
      switch (status) {
      case 1:
        return '调度中';
      case 2:
        return '已取消';
      case 3:
        return '已过期';
      case 4:
        return '已调度';
      }
    }

    dispatchColor = status => {
      switch (status) {
      case 1:
        return { color: '#BA914A' };
      case 2:
        return { color: '#999896' };
      case 3:
        return { color: '#999896' };
      case 4:
        return { color: '#2CBD26' };
      }
    }

    handleFunc = () => {
      const { handleFunc } = this.props;
      handleFunc && handleFunc();
    }

    cancelFunc = () => {
      const { cancelFunc } = this.props;
      cancelFunc && cancelFunc();
    }

    handleFavorite = () => {
      const { ifCollect, id } = this.state;
      if (ifCollect == 1) {
        this.setState({ ifCollect: 2 });
        this.collectHandle(id, 2);
      } else if (ifCollect == 2) {
        this.setState({ ifCollect: 1 });
        this.collectHandle(id, 1);
      }
    }

    // 转义单位
    matchingUnit(unit) {
      const { unitList } = this.props;
      if (!unit || unitList.length === 0) {
        return '';
      }
      if (unitList.length > 0) {
        const unitName = unitList.filter(u => u.code === unit);
        if (unitName.length > 0) {
          return unitName[0].name;
        }
        return unit;
      }
      return unit;
    }

    collectHandle = (id, state) => {
      const params = { id, state };
      supply.collectSupply(params).then(res => {
        if (res.success) {
          if (state == 1) {
            msg.emit('app:tip', { text: '已收藏，货源进入收藏状态' });
          } else if (state == 2) {
            msg.emit('app:tip', { text: '已取消收藏，货源进入未收藏状态' });
          }
        } else {
          if (state == 1) {
            msg.emit('app:tip', { text: '收藏失败' });
          } else if (state == 2) {
            msg.emit('app:tip', { text: '取消失败' });
          }
        }
      });
    }

    goodsDetails = () => {
      const { goodsDetails } = this.props;
      goodsDetails && goodsDetails();
    }

    cancelFavorite = () => {
      const { cancelFavorite } = this.props;
      cancelFavorite && cancelFavorite();
    }

    transTransport = type => {
      switch (type) {
      case 1:
        return '整车';
      case 2:
        return '零担';
      }
    }

    render() {
      const { hendleTitle, handleStyle, wordStyle, isHistory, hasCancel, isfavorite, queryType, unitList } = this.props;
      const { cityBegin, districtBegin, cityEnd, districtEnd,
        supplyName, packagingType, weight, transportation, surplusEffectiveDays,
        truckType, truckLength, publishTime, status, ifCollect, contractStatus, weightUnit, isLimitWeight, remainWeight, isLimitDate, progress } = this.state;

      const { startAddress, endAddress, goodsTypeName, freightUnit, freightConsignorPer, parentGoodsTypeName,
        packagingTypeName, } = this.state;
      const dispatchStatus = this.dispatchStatus(status);
      const dispatchColor = this.dispatchColor(status);
      const partTime = publishTime && publishTime.substring(5, 16);
      const transTransport = this.transTransport(transportation);
      const truckLenList = truckLength && truckLength.split(',') || [];
      const showFav = ifCollect == 1;
      return (
        <View style={styles.contaner}>
          <View>
            <View style={styles.itemTop}>
              <View style={styles.foo}>
                <Image style={styles.fooIcon} source={iconTime} />
                {
                  isLimitDate == 2 ? (
                    <Text>无限期</Text>
                  ) : (
                    <Text>
                      {surplusEffectiveDays}
                      天
                    </Text>
                  )
                }

              </View>
              <View style={[styles.foo, styles.fooCenter]}>
                <Image style={styles.fooIcon} source={iconTon} />
                {
                  isLimitWeight == 2 ? <Text>无限量</Text> :
                    (
                      queryType == 1 ?
                        <Text>
                          {weight}
                          {weightUnit && this.matchingUnit(weightUnit)}
                        </Text> :
                        <Text>
                          {`${remainWeight}/${weight}`}
                          {weightUnit && this.matchingUnit(weightUnit)}
                        </Text>
                    )
                }
              </View>
              {this.checkStatus(queryType, status)}
            </View>
            <View style={styles.oneBox}>
              <View style={styles.leftAddress}>
                <FlagView tips='起' colors={isHistory ? ['#CDCCC9', '#CDCCC9'] : ['#7EE35E', '#2CBD26']} />
                <Text numberOfLines={1} style={[styles.addrTip, isHistory && styles.isHistoryAddr]}>{startAddress}</Text>
              </View>
              <TouchableOpacity activeOpacity={0.8} style={styles.marginBottomStyle} onPress={this.goodsDetails}>
                <Text numberOfLines={2} style={styles.twoBox}>
                  {goodsTypeName}
                  <VerticalLine />
                  {packagingTypeName}
                </Text>
              </TouchableOpacity>
              <View style={styles.middleAddress}>
                <FlagView tips='终' colors={isHistory ? ['#CDCCC9', '#CDCCC9'] : ['#F48F25', '#EB2F2F']} />
                <Text numberOfLines={1} style={[styles.addrTip, isHistory && styles.isHistoryAddr]}>{endAddress}</Text>
              </View>
              <View style={styles.rightAddress}>
                <Text style={styles.danwei}>¥</Text>
                <Text style={[styles.dispBasic]}>
                  {freightConsignorPer}
                  /
                  {freightUnit && this.matchingUnit(freightUnit)}
                </Text>
              </View>
            </View>

          </View>

          <View style={styles.threeBox}>
            <View style={styles.timeWrap}>
              <Text style={[styles.createDate, isHistory && styles.isHistoryTip]}>{partTime}</Text>
            </View>
            <View style={styles.handleStyle}>
              { this.checkBtn(queryType, status) }
            </View>
          </View>
        </View>
      );
    }

    checkStatus = (queryType, status) => {
      // 货源状态  1.待签约 2.已签约 3已取消 4已过期 -1.禁用
      if (queryType == 1) {
        if (status == 1) {
          return (
            <View style={styles.foo}>
              <Text style={styles.qianyue}>待签约</Text>
              <Image style={styles.rightIcon} source={iconRightCoffee} />
            </View>
          );
        } if (status == 3) {
          return (
            <View style={styles.foo}>
              <Text style={styles.fooStatus}>已取消</Text>
              <Image style={styles.rightIcon} source={iconRightGray} />
            </View>
          );
        } if (status == 4) {
          return (
            <View style={styles.foo}>
              <Text style={styles.fooStatus}>已过期</Text>
              <Image style={styles.rightIcon} source={iconRightGray} />
            </View>
          );
        }
      } else if (queryType == 2) {
        const { contractStatus } = this.state;
        // 合同状态 1进行中 2完成 3到期
        if (contractStatus == 1) {
          return (
            <View style={styles.foo}>
              <Text style={styles.gooStatus}>进行中</Text>
              <Image style={styles.rightIcon} source={iconRightGreen} />
            </View>
          );
        } if (contractStatus == 2) {
          return (
            <View style={styles.foo}>
              <Text style={styles.fooStatus}>已完成</Text>
              <Image style={styles.rightIcon} source={iconRightGray} />
            </View>
          );
        } if (contractStatus == 3) {
          return (
            <View style={styles.foo}>
              <Text style={styles.fooStatus}>已到期</Text>
              <Image style={styles.rightIcon} source={iconRightGray} />
            </View>
          );
        }
        if (contractStatus == 4) {
          return (
            <View style={styles.foo}>
              <Text style={styles.fooStatus}>已取消</Text>
              <Image style={styles.rightIcon} source={iconRightGray} />
            </View>
          );
        }
      }
    }

    checkBtn = (queryType, status) => {
      // 货源状态  1.待签约 2.已签约 3已取消 4已过期 -1.禁用
      if (queryType == 1) {
        if (status == 1) {
          return (
            <View style={{ flexDirection: 'row' }}>
              <HandleBtn
                handleBtn={this.cancelFunc}
                btnStyle={{ borderColor: '#CDCCC9' }}
                wordStyle={{ color: fontColorSecDeepGray }}
                hendleTitle='取消'
              />
              <HandleBtn
                handleBtn={this.handleFunc}
                btnStyle={{ borderColor: '#BA914A' }}
                wordStyle={{ color: '#BA914A' }}
                hendleTitle='修改信息'
              />
            </View>
          );
        } if (status == 3 || status == 4) {
          return (
            <HandleBtn
              handleBtn={this.handleFunc}
              btnStyle={{ borderColor: '#BA914A' }}
              wordStyle={{ color: '#BA914A' }}
              hendleTitle='快速重发'
            />
          );
        }
      } else if (queryType == 2) {
        const { contractStatus } = this.state;
        // 合同状态 1进行中 2完成 3到期
        if (contractStatus == 1) {
          return (
            <View style={{ flexDirection: 'row' }}>
              <HandleBtn
                handleBtn={this.cancelFunc}
                btnStyle={{ borderColor: '#CDCCC9' }}
                wordStyle={{ color: fontColorSecDeepGray }}
                hendleTitle='取消'
              />
              <HandleBtn
                handleBtn={this.handleFunc}
                btnStyle={{ borderColor: '#BA914A' }}
                wordStyle={{ color: '#BA914A' }}
                hendleTitle='创建订单'
              />
            </View>
          );
        } if (contractStatus == 2 || contractStatus == 3) {
          return (
            <HandleBtn
              handleBtn={this.handleFunc}
              btnStyle={{ borderColor: '#BA914A' }}
              wordStyle={{ color: '#BA914A' }}
              hendleTitle='快速重发'
            />
          );
        }
      }
    }
}
const styles = StyleSheet.create({
  contaner: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    borderRadius: px2dp(6) * 2,
    marginTop: px2dp(12) * 2,
    marginLeft: px2dp(12) * 2,
    marginRight: px2dp(12) * 2,
    paddingLeft: px2dp(12) * 2,
    paddingRight: px2dp(12) * 2,
    paddingTop: px2dp(16) * 2,
    paddingBottom: px2dp(12) * 2,
  },
  itemTop: {
    flexDirection: 'row',
    borderBottomWidth: px2dp(1),
    borderBottomColor: splitLineColorLightGray,
    paddingBottom: px2dp(20),
    marginBottom: px2dp(20)
  },
  foo: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  fooCenter: {
    flex: 1,
    marginLeft: px2dp(36)
  },
  fooIcon: {
    width: px2dp(26),
    height: px2dp(26),
    marginRight: px2dp(12)
  },
  rightIcon: {
    width: px2dp(24),
    height: px2dp(24)
  },
  qianyue: {
    color: fontColorCoffee
  },
  fooStatus: {
    color: fontColorSecDeepGray
  },
  gooStatus: {
    color: fontColorLightGreen
  },
  oneBox: {
    // flex: 1,
    // flexDirection: 'row',
    // justifyContent: 'center',
    // alignItems: 'center'
  },
  leftAddress: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  addrTip: {
    color: '#343332',
    fontSize: px2dp(14) * 2,
    marginLeft: px2dp(8) * 2,
    marginRight: px2dp(30) * 2
  },
  isHistoryAddr: {
    color: '#666562'
  },
  middleAddress: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  rightAddress: {
    flexDirection: 'row',
    marginTop: px2dp(20),
    marginBottom: px2dp(40),
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
  },
  rightCancelIcon: {
    width: px2dp(12) * 2,
    height: px2dp(12) * 2
  },
  dispBasic: {
    fontSize: px2dp(36),
    color: fontColorRed,
  },
  danwei: {
    color: fontColorRed,
    fontSize: px2dp(24),
    marginBottom: px2dp(4),
    marginRight: px2dp(4)
  },
  twoBox: {
    flex: 1,
    flexWrap: 'wrap',
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: px2dp(5) * 2,
    lineHeight: px2dp(25) * 2
  },
  twoItem: {
    fontSize: px2dp(13) * 2,
    color: '#666562',
    lineHeight: px2dp(30) * 2
  },
  isHistoryTip: {
    color: '#999896'
  },
  threeBox: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',

  },
  timeWrap: {
    flex: 1,
    justifyContent: 'center'
  },
  createDate: {
    color: '#999896',
    fontSize: px2dp(13) * 2
  },
  handleStyle: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end'
  },
  cancelWrap: {
    backgroundColor: '#FFFFFF',
    borderRadius: px2dp(4) * 2,
    borderColor: '#CDCCC9',
    borderWidth: px2dp(1),
    paddingTop: px2dp(4) * 2,
    paddingBottom: px2dp(4) * 2,
    paddingLeft: px2dp(22) * 2,
    paddingRight: px2dp(22) * 2

  },
  cancelTet: {
    color: '#999896'
  },
  marginBottomStyle: {
    paddingBottom: px2dp(20),
  }

});
